<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增强响应体获取测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-section h3 {
            margin-top: 0;
            color: #333;
        }
        button {
            background: #007cba;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #005a87;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .log-entry {
            margin-bottom: 5px;
            padding: 2px 0;
        }
        .log-entry.success {
            color: #28a745;
        }
        .log-entry.error {
            color: #dc3545;
        }
        .log-entry.info {
            color: #17a2b8;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
            margin-left: 10px;
        }
        .status.ready {
            background: #d4edda;
            color: #155724;
        }
        .status.not-ready {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>增强响应体获取功能测试</h1>
        <p>此页面用于测试浏览器扩展的增强响应体获取功能，支持不同的responseType。</p>
        
        <div class="test-section">
            <h3>扩展状态检查</h3>
            <p>扩展注入状态: <span id="extension-status" class="status not-ready">未检测到</span></p>
            <button onclick="checkExtensionStatus()">重新检查</button>
        </div>

        <div class="test-section">
            <h3>文本响应测试 (responseType: 'text')</h3>
            <button onclick="testTextResponse()">测试文本响应</button>
            <div id="text-log" class="log"></div>
        </div>

        <div class="test-section">
            <h3>JSON响应测试 (responseType: 'json')</h3>
            <button onclick="testJsonResponse()">测试JSON响应</button>
            <div id="json-log" class="log"></div>
        </div>

        <div class="test-section">
            <h3>Blob响应测试 (responseType: 'blob')</h3>
            <button onclick="testBlobResponse()">测试Blob响应</button>
            <div id="blob-log" class="log"></div>
        </div>

        <div class="test-section">
            <h3>ArrayBuffer响应测试 (responseType: 'arraybuffer')</h3>
            <button onclick="testArrayBufferResponse()">测试ArrayBuffer响应</button>
            <div id="arraybuffer-log" class="log"></div>
        </div>

        <div class="test-section">
            <h3>Document响应测试 (responseType: 'document')</h3>
            <button onclick="testDocumentResponse()">测试Document响应</button>
            <div id="document-log" class="log"></div>
        </div>

        <div class="test-section">
            <h3>综合测试</h3>
            <button onclick="runAllTests()">运行所有测试</button>
            <button onclick="clearAllLogs()">清空日志</button>
            <div id="summary-log" class="log"></div>
        </div>
    </div>

    <script>
        // 日志记录函数
        function log(containerId, message, type = 'info') {
            const container = document.getElementById(containerId);
            const entry = document.createElement('div');
            entry.className = `log-entry ${type}`;
            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            container.appendChild(entry);
            container.scrollTop = container.scrollHeight;
        }

        // 检查扩展状态
        function checkExtensionStatus() {
            const statusElement = document.getElementById('extension-status');
            if (window.NetworkInterceptorContent) {
                statusElement.textContent = '已注入';
                statusElement.className = 'status ready';
                log('summary-log', '扩展已成功注入', 'success');
            } else {
                statusElement.textContent = '未检测到';
                statusElement.className = 'status not-ready';
                log('summary-log', '扩展未检测到，请确保扩展已安装并启用', 'error');
            }
        }

        // 测试文本响应
        function testTextResponse() {
            log('text-log', '开始测试文本响应...', 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'text';
            xhr.open('GET', 'https://httpbin.org/get?test=text');
            
            xhr.onload = function() {
                log('text-log', `响应状态: ${xhr.status}`, 'info');
                log('text-log', `响应类型: ${xhr.responseType}`, 'info');
                log('text-log', `响应长度: ${xhr.responseText ? xhr.responseText.length : 0} 字符`, 'success');
            };
            
            xhr.onerror = function() {
                log('text-log', '请求失败', 'error');
            };
            
            xhr.send();
        }

        // 测试JSON响应
        function testJsonResponse() {
            log('json-log', '开始测试JSON响应...', 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.open('GET', 'https://httpbin.org/json');
            
            xhr.onload = function() {
                log('json-log', `响应状态: ${xhr.status}`, 'info');
                log('json-log', `响应类型: ${xhr.responseType}`, 'info');
                log('json-log', `响应对象: ${xhr.response ? 'JSON对象' : '空'}`, 'success');
            };
            
            xhr.onerror = function() {
                log('json-log', '请求失败', 'error');
            };
            
            xhr.send();
        }

        // 测试Blob响应
        function testBlobResponse() {
            log('blob-log', '开始测试Blob响应...', 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.open('GET', 'https://httpbin.org/get?test=blob');
            
            xhr.onload = function() {
                log('blob-log', `响应状态: ${xhr.status}`, 'info');
                log('blob-log', `响应类型: ${xhr.responseType}`, 'info');
                log('blob-log', `Blob大小: ${xhr.response ? xhr.response.size : 0} 字节`, 'success');
            };
            
            xhr.onerror = function() {
                log('blob-log', '请求失败', 'error');
            };
            
            xhr.send();
        }

        // 测试ArrayBuffer响应
        function testArrayBufferResponse() {
            log('arraybuffer-log', '开始测试ArrayBuffer响应...', 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'arraybuffer';
            xhr.open('GET', 'https://httpbin.org/get?test=arraybuffer');
            
            xhr.onload = function() {
                log('arraybuffer-log', `响应状态: ${xhr.status}`, 'info');
                log('arraybuffer-log', `响应类型: ${xhr.responseType}`, 'info');
                log('arraybuffer-log', `ArrayBuffer大小: ${xhr.response ? xhr.response.byteLength : 0} 字节`, 'success');
            };
            
            xhr.onerror = function() {
                log('arraybuffer-log', '请求失败', 'error');
            };
            
            xhr.send();
        }

        // 测试Document响应
        function testDocumentResponse() {
            log('document-log', '开始测试Document响应...', 'info');
            
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'document';
            xhr.open('GET', 'https://httpbin.org/html');
            
            xhr.onload = function() {
                log('document-log', `响应状态: ${xhr.status}`, 'info');
                log('document-log', `响应类型: ${xhr.responseType}`, 'info');
                log('document-log', `Document: ${xhr.response ? 'HTML文档' : '空'}`, 'success');
            };
            
            xhr.onerror = function() {
                log('document-log', '请求失败', 'error');
            };
            
            xhr.send();
        }

        // 运行所有测试
        function runAllTests() {
            log('summary-log', '开始运行所有测试...', 'info');
            
            setTimeout(() => testTextResponse(), 100);
            setTimeout(() => testJsonResponse(), 500);
            setTimeout(() => testBlobResponse(), 1000);
            setTimeout(() => testArrayBufferResponse(), 1500);
            setTimeout(() => testDocumentResponse(), 2000);
            
            setTimeout(() => {
                log('summary-log', '所有测试已启动，请查看各个测试区域的日志', 'success');
            }, 2500);
        }

        // 清空所有日志
        function clearAllLogs() {
            const logContainers = ['text-log', 'json-log', 'blob-log', 'arraybuffer-log', 'document-log', 'summary-log'];
            logContainers.forEach(id => {
                document.getElementById(id).innerHTML = '';
            });
        }

        // 页面加载完成后检查扩展状态
        window.addEventListener('load', () => {
            setTimeout(checkExtensionStatus, 1000);
        });
    </script>
</body>
</html>